<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-13 15:09:32
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-02-03 10:59:52
 * @FilePath: \mobile\src\components\List.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>

        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in picList.pic" :key="item" @click="buy(item.proid)">
                <img v-lazy="item.img1" alt="">
                <div class="text">{{ item.proname }}</div>
                <div class="price">￥{{ item.originprice }}</div>
            </van-cell>
        </van-list>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { router } from '../router';
import { getData } from '../services'

const picList = reactive({ pic: [] } as any)
const loading = ref(false);
const finished = ref(false);

const a = ref(1)
const onLoad = async () => {
    // 异步更新数据
    const { data } = await getData(a.value++)
    data.data.forEach((_item: []) => {
        picList.pic.push(_item)
    })

    loading.value = false;

    if (data.data.length === 0) finished.value = true

}

const buy = (id: string) => {
    router.push('/detail?id=' + id)
}
</script>

<style lang="scss" scoped>
.van-list {
    display: flex;
    flex-wrap: wrap;

    .van-cell {
        width: 50%;
        height: 280px;
        flex-direction: column-reverse;

        .text {
            position: absolute;
            bottom: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis; //文本超出省略号替代
            text-align: left;


        }

        .price {
            color: red;
            position: absolute;
            bottom: 0;

        }

        img {
            width: 100%;
            height: 70%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}
</style>